import React, {useEffect, useState} from 'react';
import "./SettingLeftTabs.scss"
import {withRouter} from "react-router-dom";

const SettingLeftTabs = (props) => {
    const {match:{params}} = props;
    const hostId = params.id

    const router = [
        {
            name: '主机信息',
            url: `/host/${hostId}/projectInformation`,
            key: "setting",
            encoded: "setting",
        },
        {
            name: '成员',
            url: `/host/${hostId}/member`,
            key: "member",
            encoded: "member",
        },
        {
            name: '权限',
            url: `/host/${hostId}/permissions`,
            key: "permissions",
            encoded: "permissions",
        },
    ];

    const [selectKey,setSelectKey] = useState(`/host/${hostId}/projectInformation`);

    const selectSetting = (url) => {
        setSelectKey(url)
        props.history.push(url)
    }

    useEffect(() => {
        // 初次进入激活导航菜单
        setSelectKey(props.location.pathname)
    }, [hostId])

    return (
        <div className="host-setting-box-right-left">
            {
                router.map((item, index) => {
                    return (
                        <div
                            key={index}
                            onClick={() => selectSetting(item.url)}
                            className={`host-setting-box-right-tabs ${item.url === selectKey ? "host-setting-select" : ""}`}
                        >
                            <span>{item.name}</span>
                        </div>
                    )
                })
            }
        </div>
    );
};

export default withRouter(SettingLeftTabs);
